{% extends 'scm/base.html' %}

{% block content %}

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Purchase Requisition</h3>

        <a href="{% url 'create_pr' %}" class="btn btn-primary">
            + Create PR
        </a>
    </div>

    <div class="card">
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-bordered table-hover">

                    <thead>
                        <tr>
                            <th>PR No</th>
                            <th>PR Date</th>
                            <th>Title</th>
                            <th>Requester</th>
                            <th>Department</th>
                            <th>Required Date</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        {% for item in prs %}

                        <tr>

                            <td>
                                {{ item.pr_no }}
                            </td>

                            <td>
                                {{ item.pr_date|date:"d-m-Y" }}
                            </td>

                            <td>
                                {{ item.pr_title }}
                            </td>

                            <td>
                                {{ item.requester }}
                            </td>

                            <td>
                                {{ item.department }}
                            </td>

                            <td>
                                {% if item.required_date %}
                                {{ item.required_date|date:"d-m-Y" }}
                                {% endif %}
                            </td>

                            <td>
                                {{ item.priority }}
                            </td>

                            <td>
                                {{ item.status }}
                            </td>

                            <!-- ACTION -->
                            <td class="text-center">

                                <!-- PRINT PDF -->
                                <a href="{% url 'pr_print' item.id %}" class="btn btn-secondary btn-sm action-btn"
                                    title="Print PDF" target="_blank">

                                    <span class="action-icon">🖨</span>

                                </a>


                                {% if item.status == 'DRAFT' %}

                                <!-- EDIT -->
                                <a href="{% url 'pr_edit' item.id %}" class="btn btn-secondary btn-sm action-btn"
                                    title="Edit">

                                    <span class="action-icon">✏</span>

                                </a>


                                <!-- DELETE -->
                                <form method="POST" action="{% url 'pr_delete' item.id %}" style="display:inline;"
                                    onsubmit="return confirm('Are you sure you want to delete this PR?');">

                                    {% csrf_token %}

                                    <button type="submit" class="btn btn-danger btn-sm action-btn" title="Delete">

                                        <span class="action-icon">🗑</span>

                                    </button>

                                </form>


                                <!-- SUBMIT -->
                                <form method="POST" action="{% url 'submit_pr' item.id %}" style="display:inline;">

                                    {% csrf_token %}

                                    <button type="submit" class="btn btn-success btn-sm action-btn" title="Submit">

                                        <span class="action-icon">➤</span>

                                    </button>

                                </form>

                                {% endif %}

                            </td>

                        </tr>

                        {% empty %}

                        <tr>
                            <td colspan="9" class="text-center">
                                No Purchase Requisition found.
                            </td>
                        </tr>

                        {% endfor %}

                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>
<style>
    .action-btn {
        width: 38px;
        height: 36px;
        padding: 0;
        margin: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .action-icon {
        font-size: 17px;
        line-height: 1;
    }
</style>
{% endblock %}